<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/TextPlugin.min.js"></script>
    <script src="./js/splitWordsFn.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body {
            width: 100%;
            /* height: 100vh; */
            overflow-x: hidden;
        }
        .box1 {
            height: 100vh;
            /* background-color: #eee; */
            display: flex;
            align-items: center;
            justify-content: stretch;
        }
        .bg-box__frame {
            height: 100vh;
            width: 100vw;
        }
        .bg-box__group {
            height: 100vh;
            width: 400vw;
            overflow: hidden;
            background: #bebebe50;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translateX(0);
        }
        .bg-box__group > .bg-box {
            height: 100vh;
            width: 25%;
            flex-shrink: 1;
        }
        .bg-box:nth-child(1) {
            background-color: #aaa;
        }
        .bg-box:nth-child(2) {
            background-color: #bbb;
        }
        .bg-box:nth-child(3) {
            background-color: #ccc;
        }
        .bg-box:nth-child(4) {
            background-color: #ddd;
        }

        
        .letters span,
        .letters2 span {
            color: white;
            font-size: 1.6rem;
            min-width: 7px;
            display: inline-block;
            transform: translateY(-10vh) translateX(10vw) scale(3.5);
            opacity: 0;
        }
        .letters2 {
            line-height: 2.4;
        }
        .letters2 span {
            font-size: 1rem;
            transform: translateY(-10px) translateX(10vw);
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box1"></div>
        <div class="bg-box__frame">
            <div class="bg-box__group">
                <div class="bg-box">
                    <div class="letters2"></div>
                </div>
                <div class="bg-box">
                    <div class="letters2"></div>
                </div>
                <div class="bg-box">
                    <div class="letters2"></div>
                </div>
                <div class="bg-box">
                    <div class="letters2"></div>
                </div>
            </div>
        </div>
        <div class="letters__group">
            <div class="letters2"></div>            
        </div>
        <div class="box1"></div>
        
        
      </div>

    <!-- <button id="animate">animate</button> -->
    <script>
        
        // use a script tag or an external JS file
        document.addEventListener("DOMContentLoaded", (event) => {
            gsap.registerPlugin(ScrollTrigger,TextPlugin)
            // const words = 'Hello World!'
            const tl = gsap.timeline({
                scrollTrigger: {
                    trigger: ".bg-box__frame",
                    scrub: .5,
                    start: "bottom 100%",
                    end: "400%",
                    // toggleActions: "play none none reset",
                    pin: true,
                    markers: true
            }})
            tl.to(".bg-box__group", {
                x: '-75%',
            })
            // splitWordsFn(words, '.letters', (letterDom, i) => {
            //     tl.to(letterDom, {
            //         y: 0,
            //         x: 0,
            //         scale: 1,
            //         opacity: 1,
            //         color: '#333',
            //         // duration: 0.5,
            //         ease: "bounce.in"
            //     }, i * 0.05);
            // })
            // document.addEventListener('scroll', function() {
            //     const scrollDistance = window.pageYOffset || document.documentElement.scrollTop;
            //     console.log('%c [ scrollDistance ]-142', 'font-size:13px; background:pink; color:#bf2c9f;', scrollDistance)
            // });
            
            const words2 = '在 GSAP 的 ScrollTrigger 插件中，toggleActions 属性用于定义当触发元素进入、处于活动状态（在视口内移动）和离开视口时应该执行的动作。这个属性接受一个字符串，该字符串由四个以空格分隔的动作组成，分别对应进入视口、处于活动状态、离开视口和再次进入视口（如果适用）时的动作。'
            const trigger1 = '.bg-box:nth-child(2)'
            const tl2 = gsap.timeline({
                scrollTrigger: {
                    trigger: ".bg-box__frame",
                    // scrub: .5,
                    start: "top 50%",
                    // end: "+=10%",
                    toggleActions: "play none none reset",
                    // pin: false,
                    markers: true
            }})
            splitWordsFn(words2, `${trigger1} > .letters2`, (letterDom, i) => {
                tl2.to(letterDom, {
                    y: 0,
                    x: 0,
                    scale: 1,
                    opacity: 1,
                    color: '#333',
                    // duration: 0.5,
                    ease: "back"
                }, i * 0.005);
            })

        });
       
       </script>
</body>
</html>